<template>
    <div class="con" style="width:99%">
    <div style="height:60px"></div>
        <el-row :gutter="20" >
            <el-col :span="6">
                <el-card style="height:100%">
                    <span style="color: #4d62a5;font-size: 20px;font-weight:900;">项目信息</span>
                    <el-divider style="margin-top:5px;" />
                    <el-row :gutter="19">
                        <el-col :span="12">
                            <div style="font-size:5px">
                                <p>{{ state.datalist.project_name }}</p>
                                <p>{{ state.datalist.city }}</p>
                                <p>{{ state.datalist.function }}+楼控系统</p>
                            </div>
                            <div style="margin-top:10px;">
                                <p>{{ state.datalist.point }}</p>
                                <p>{{ state.datalist.owner }}</p>
                                <p>{{ state.datalist.create_time }}</p>
                                <!-- <p>{{ state.datalist.img }}</p> -->
                                <!-- <p>{{ state.datalist.project_name }}</p> -->
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <img style="border-radius:5px"
                                src="https://img0.baidu.com/it/u=3812568168,4141521674&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                                height="100" width="150" alt="">
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="height:100%;">
                    <el-row :gutter="5">
                        <el-col :span="6"><span style="color: #4d62a5;font-size: 20px;font-weight:900;">舒适</span>
                        </el-col>
                        <el-col :span="9"></el-col>
                        <el-col :span="4">
                            <el-select v-model="value" placeholder="温度" size="small">
                                <el-option label="25℃" value="25" />
                                <el-option label="30℃" value="30" />
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker style="width:150px" v-model="value1" type="date" placeholder="请选择日期"
                                size="small" />
                        </el-col>
                    </el-row>
                    <el-divider style="margin-top:5px;" />
                    <el-row :gutter="5">
                        <el-col :span="4">
                            <el-button v-show="wether == '舒适'" style="color:blue" class="el-button-wether"
                                auto-insert-space>
                                {{ wether }}</el-button>
                            <el-button v-show="wether == '良好'" style="color:orange" class="el-button-wether"
                                auto-insert-space>{{ wether }}</el-button>
                            <el-button v-show="wether == '糟糕'" style="color:#DC143C" class="el-button-wether"
                                auto-insert-space>{{ wether }}</el-button>
                        </el-col>
                        <el-col :span="5">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <p>温度</p>
                                    <p><span style="color:rgb(29,123,203);font-size:20px">23.1</span>℃</p>
                                    <p>(18-20)</p>
                                </el-col>
                                <el-col :span="12">
                                    <p>湿度</p>
                                    <p><span style="color:rgb(29,123,203);font-size:20px">56.3</span>%</p>
                                    <p>(30-60)</p>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" style="margin-top:20px">
                                <el-col :span="12">
                                    <p>二氧化碳</p>
                                    <p><span style="color:rgb(29,123,203);font-size:20px">560.3</span>ppm</p>
                                    <p>(≤1,000)</p>
                                </el-col>
                                <el-col :span="12">
                                    <p>PM2.5</p>
                                    <p><span style="color:rgb(29,123,203);font-size:20px">32.1</span>μg/m³</p>
                                    <p>(≤15)</p>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="14">
                            <scEcharts width="100%" height="160px" :option="option"></scEcharts>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="height:100%;">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <span style="color: #4d62a5;font-size: 20px;font-weight:900;">资产价值</span>
                        </el-col>
                        <el-col :span="8"></el-col>
                        <el-col :span="10">
                            <span style="color: #4d62a5;font-size: 15px;font-weight:900;">OAO陪伴
                                <el-button @click="returnforword"
                                    style="margin-left:10px;background-color:rgb(77,98,165);" round size="small">
                                    <sc-icon>
                                        <sc-icon-return style="width:20px;height:20px;"></sc-icon-return>
                                    </sc-icon>
                                </el-button>
                            </span>
                        </el-col>
                    </el-row>
                    <el-divider style="margin-top:5px;" />
                    <el-row>
                        <el-col :span="8">
                            <div style="margin-top:45px">
                                <p>预期ROI<span style="color:rgb(29,123,203);font-size:20px;margin-left:20px">23.1</span>%
                                </p>
                                <p style="margin-top:20px">预期IRR<span
                                        style="color:rgb(29,123,203);font-size:20px;margin-left:20px">23.1</span></p>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <scEcharts style="margin-top:-20px" width="100%" height="170px" :option="option1">
                            </scEcharts>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <div style="height:50px"></div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card style="height:110%;">
                    <span style="color: #4d62a5;font-size: 20px;font-weight:900;">特色展示</span>
                    <el-divider style="margin-top:5px;" />
                    <el-row>
                        <el-col :span="5">
                            碳中和成本
                        </el-col>
                        <el-col :span="10"></el-col>
                        <el-col :span="9">
                            <span style="color:rgb(29,123,203);font-size:20px">30,000</span>RMB/年
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:20px;">
                        <el-col :span="19"></el-col>
                        <el-col :span="5">
                            <span style="font-size:15px;">碳排放</span>
                        </el-col>
                    </el-row>
                    <scEcharts width="100%" height="300px" :option="option2"></scEcharts>
                    <el-row style="margin-top: 40px;">
                        <el-col :span="8">
                            助力
                            <el-select style="width:100px" v-model="value2" placeholder="LEED" size="small">
                                <el-option></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="13"></el-col>
                        <el-col :span="3">
                            <span style="color:rgb(29,123,203);font-size:20px">5</span>分
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-card style="height:96%;">
                            <span style="color: #4d62a5;font-size: 20px;font-weight:900;">能耗</span>
                            <el-divider style="margin-top:5px;" />
                            <div style="height:130px;margin-top:-20px;">
                                <el-row>
                                    <el-col :span="10">
                                        <div style="margin-left:20px">
                                            <p>
                                                OAO
                                            </p>
                                            <p>
                                                累计收益：<el-select style="width:100px" v-model="value4" placeholder="节费"
                                                    size="small">
                                                    <el-option label="节电" value="节电"></el-option>
                                                    <el-option label="节费" value="节费"></el-option>
                                                    <el-option label="减碳" value="减碳"></el-option>
                                                </el-select>
                                                <span
                                                    style="color:rgb(29,123,203);font-size:20px;margin:0 5px 0 20px">26,000</span>RMB
                                            </p>
                                            <p style="margin:20px 0 0 180px;">
                                                超过/不足
                                            </p>
                                            <p>
                                                相比目标：<el-select style="width:100px" v-model="value5" placeholder="节费"
                                                    size="small">
                                                    <el-option label="节电" value="节电"></el-option>
                                                    <el-option label="节费" value="节费"></el-option>
                                                    <el-option label="减碳" value="减碳"></el-option>
                                                </el-select>
                                                <span
                                                    style="color:rgb(29,123,203);font-size:20px;margin:0 5px 0 20px">30,000</span>kwh
                                            </p>
                                        </div>
                                    </el-col>
                                    <el-col :span="14">
                                        <scEcharts style="margin-top:-30px" height="180px" :option="option5">
                                        </scEcharts>
                                    </el-col>
                                </el-row>
                            </div>
                            <div style="height:130px;margin-top:0;">
                                <scEcharts style="margin-top:-20px;" height="150px" :option="option6"></scEcharts>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card style="height:96%;">
                            <span style="color: #4d62a5;font-size: 20px;font-weight:900;">风险</span>
                            <el-divider style="margin-top:5px;" />
                            <div style="height:130px;margin-top:-20px;">
                                <scEcharts :option="option3"></scEcharts>
                            </div>
                            <div style="height:130px;margin-top:0;">
                                <scEcharts :option="option4"></scEcharts>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-card style="height:125%;">
                            <el-row :gutter="5">
                                <el-col :span="2"><span
                                        style="color: #4d62a5;font-size: 20px;font-weight:900;">设备管理</span>
                                </el-col>
                                <el-col :span="16"></el-col>
                                <el-col :span="6" style="text-align: right;">
                                    <el-date-picker size="small" style="width:200px" v-model="value3" type="daterange"
                                        range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
                                </el-col>
                            </el-row>
                            <el-divider style="margin-top:5px;" />
                            <el-row>
                                <el-col :span="19">
                                    <scEcharts style="margin-top:-20px;float:right;" height="150px" :option="option7">
                                    </scEcharts>
                                </el-col>
                                <el-col :span="5">
                                    <p>运维工单</p>
                                    <ul>
                                        <li style="margin-top:10px;" v-for="(item, index) of list" :key="index">
                                            {{ item }}
                                        </li>
                                    </ul>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>

</template>

<script setup>
import scEcharts from '@/components/scEcharts';
import { reactive, ref, onMounted } from 'vue'
import { showcase } from '@/api/model/login'
var value = ref('')
var value1 = ref('')
var value2 = ref('')
var value3 = ref('')
var value4 = ref('')
var value5 = ref('')
var wether = ref('良好')
var list = reactive([
    '22-04-23 09:30 冷冻水出水温度调整为9度',
    '22-04-23 09:30 冷冻水出水温度调整为9度',
    '22-04-23 09:30 冷冻水出水温度调整为9度',
])
var option = reactive(
    {

        legend: {
            orient: 'horizontal',
            top: 0,
            right: 20,
            itemHeight: 1
        },
        xAxis: {
            name: '时',
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        },
        yAxis: {
            name: '趋势图',
            axisLine: {
                show: true
            },
            type: 'value',
        },
        grid: {
            left: '5%',
            right: '10%',
            bottom: '10%',
            containLabel: true
        },
        series: [
            {
                name: '室内',
                data: [1500, 1000, 1200, 1500, 1000, 1000, 1000, 1000, 1000, 1000, 1200, 1600, 1000],
                type: 'line',
                itemStyle: {
                    color: '#ebebec'
                },
                // markLine: {
                //     symbol: 'none',
                //     data: [
                //         {
                //             name: ' 国内标准',
                //             yAxis: 1000,
                //             lineStyle: {
                //                 color: '#41c47d',
                //                 type: 'solid',
                //             },
                //             label: {
                //                 show: true,
                //                 formatter: `    {c}\n{b}`
                //             },
                //         },
                //         {
                //             name: ' 世卫标准',
                //             yAxis: 600,
                //             lineStyle: {
                //                 color: '#368dcd',
                //                 type: 'solid'
                //             },
                //             label: {
                //                 show: true,
                //                 formatter: `     {c}\n{b}`
                //             },
                //         }
                //     ]
                // },
            },
            {
                name: '室外',
                data: [1000, 1400, 1300, 1000, 1300, 1000, 1200, 1000, 1500, 1400, 1000, 1200, 1000],
                type: 'line',
                itemStyle: {
                    color: '#55a2d2'
                },

            }
        ],
    }
)
var option1 = reactive({
    title: {
        subtext: '资产增值',
        right: '10%'
    },
    xAxis: {
        type: 'category',
        data: ['2019', '2020', '2021']
    },
    yAxis: {
        axisLine: {
            show: true
        },
        name: 'K RMB',
        type: 'value'
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '10%',
        containLabel: true
    },
    series: [
        {
            data: [
                {
                    value: 200,
                    itemStyle: {
                        color: ' #D6EBFA'
                    }
                },
                {
                    value: 140,
                    itemStyle: {
                        color: '#D6EBFA'
                    }
                },
                {
                    value: 230,
                    itemStyle: {
                        color: '#D6EBFA'
                    }
                },
            ],
            type: 'bar'
        }
    ]
})
var option2 = reactive(
    {
        legend: {
            orient: 'horizontal',
            bottom: 20,
            right: 60,
            itemHeight: 1
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '20%',
            bottom: '15%',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', '', '可比建筑', '本地建筑'],
                ['2019', 195, 200, 225],
                ['2020', 140, 160, 180],
                ['2021', 230, 200, 225],
            ]
        },
        xAxis: { type: 'category', name: '年' },
        yAxis: {
            name: 'k RMB',
            axisLine: {
                // x轴线隐藏，但不隐藏背景线
                show: true,
            },
        },
        series: [
            {
                type: 'bar',
                itemStyle: {
                    color: '#D6EBFA'
                },
            },
            {
                type: 'line', 
                symbol: 'none',
                lineStyle: {
                    width: 3,
                    color: '#fed864'
                },
            },
            {
                type: 'line',
                symbol: 'none',
                lineStyle: {
                    width: 3,
                    color: 'red',
                },
            },
        ]
    })
var option3 = reactive({
    title: {
        subtext: '设备健康度',
        right: "right"
    },
    xAxis: {
        name: '日',
        type: 'category',
        data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '昨日', '今日']
    },
    yAxis: {
        name: '%',
        axisLine: {
            show: true
        },
        type: 'value'
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '10%',
        containLabel: true
    },
    series: [
        {
            data: [10, 15, 25, 10, 15, 20, 30, 10, 18, 15],
            type: 'line',
            lineStyle: {
                color: 'rgb(255,196,15)'
            },
            itemStyle: {
                color: 'rgb(255,196,15)'
            },
        }
    ]
})
var option4 = reactive({
    title: {
        subtext: '故障修复时间(平均)',
        right: "right"
    },
    xAxis: {
        name: '日',
        type: 'category',
        data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '昨日', '今日']
    },
    yAxis: {
        name: '小时',
        axisLine: {
            show: true
        },
        type: 'value'
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '10%',
        containLabel: true
    },
    series: [
        {
            data: [10, 15, 25, 10, 15, 20, 30, 10, 18, 15],
            type: 'line',
            lineStyle: {
                color: 'rgb(255,196,15)'
            },
            itemStyle: {
                color: 'rgb(255,196,15)'
            },
        }
    ]
})
var option5 = reactive(
    {
        legend: {
            orient: 'vertical',
            right: 20,
            top: 'center',
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '20%',
            bottom: '3%',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', '实际消耗', '能耗预算', '类似建筑', '本地强制', '本地先进'],
                ['2019', 200, 150, 30, 200, 150],
                ['2020', 100, 150, 55.1, 200, 150],
                ['2021', 220, 210, 82.5, 200, 150],
            ]
        },
        xAxis: { type: 'category', name: '年' },
        yAxis: {
            name: 'RMB/m²', axisLine: {
                // x轴线隐藏，但不隐藏背景线
                show: true,
            },
        },
        series: [
            {
                type: 'bar',
                itemStyle: {
                    color: '#D6EBFA'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#0070C0'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#FFA34E'
                }
            },
            {
                type: 'line', symbol: 'none',
                // lineStyle: {
                //     width: 3,
                //     color: '#fed864'
                // },
            },
            {
                type: 'line',
                symbol: 'none',
                lineStyle: {
                    width: 3,
                    color: 'green',
                },
            },
        ]
    }
)
var option6 = reactive(
    {
        legend: {
            orient: 'vertical',
            right: 20,
            bottom: 0,
            top: 'center',
        },
        xAxis: {
            name: '月',
            data: ['2021.1', '2021.2', '2021.3', '2021.4', '2021.5', '2021.6', '2021.7', '2021.8', '2021.9', '2021.10', '2021.11', '2021.12']
        },
        yAxis: {
            axisLine: {
                show: true
            },
            name: 'RMB/㎡',
            type: 'value'
        },
        grid: {
            left: '3%',
            right: '15%',
            bottom: '10%',
            containLabel: true
        },
        series: [
            {
                name: '实际能耗',
                data: [10, 14, 8, 9, 6, 12, 6, 8, 2, 14, 5, 10],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#EEEEEE',
                },
                itemStyle: {
                    color: '#EEEEEE'
                },
                areaStyle: {
                    color: '#FAFBFC',
                    opacity: 0.5
                }
            },
            {
                name: '目标能耗',
                data: [9, 5, 10, 5, 13, 8, 4, 7, 9, 15, 10, 5],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#FFC40F',
                },
                itemStyle: {
                    color: '#FFC40F'
                },
                areaStyle: {
                    color: '#FBF0CD',
                    opacity: 0.5
                }
            }
        ]
    }
)
var option7 = reactive(
    {
        legend: {
            width: 'auto',
            left: 'left',
            bottom: '10%',
            orient: 'vertical',
            itemHeight: 1
        },
        xAxis: {
            name: '月',
            data: ['2021.1', '2021.2', '2021.3', '2021.4', '2021.5', '2021.6', '2021.7', '2021.8', '2021.9', '2021.10', '2021.11', '2021.12']
        },
        yAxis: [
            {
                type: "value",
                alignTicks: true,
                name: '%',
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ADAEB4'
                    }
                }
            },
            {
                type: "value",
                alignTicks: true,
                name: '小时',
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ADAEB4'
                    }
                }
            }
        ],
        grid: {
            left: '15%',
            right: '5%',
            bottom: '10%',
            containLabel: true
        },
        series: [
            {
                name: '工单执行率',
                data: [10, 14, 8, 9, 6, 12, 6, 8, 2, 14, 5, 10],
                type: 'line',
                lineStyle: {
                    color: '#EEEEEE',
                },
                itemStyle: {
                    color: '#EEEEEE'
                },
            },
            {
                name: '工单成功执行率',
                data: [9, 5, 10, 5, 13, 8, 4, 7, 9, 15, 10, 5],
                type: 'line',
                lineStyle: {
                    color: '#FFC40F',
                },
                itemStyle: {
                    color: '#FFC40F'
                },
            },
            {
                name: '平均工单响应时间',
                data: [8, 9, 12, 6, 7, 10, 8, 15, 11, 8, 3, 14],
                type: 'line',
                lineStyle: {
                    color: '#0070C0',
                },
                itemStyle: {
                    color: '#0070C0'
                },
            }
        ]
    }
)
function returnforword() {
    // console.log(history)
    history.back()
}
let state = reactive({
    datalist: [],

    a: {
        project_id: sessionStorage.getItem('proid') || '1'
    }
})
onMounted(() => {
    getdata()
})
const getdata = async () => {
    let res = await showcase(state.a)
    // console.log(res);
    state.datalist = res.data
}
</script>

<style>
.con{
    width: 100%;
}
.el-button-wether {
    width: 80px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    font-size: 22px;
    border-color: rgb(165, 165, 166);
    border-radius: 5px;
}

.legend {
    list-style: none;
    float: right;
}

.legend li {
    display: inline-block;
    margin-left: 5px;
}
</style>



